<template>
  <div>
    <div class="enter" :style="{ height: `${tableHight}` }" @click="goSearch">
      <div
        v-if="type == 1"
        class="bg-img"
        :style="`background-image: url(${src});`"
        @click="getMixinTitle"
      ></div>
      <video
        v-if="type == 2"
        class="bg-video"
        :src="src"
        autoplay="autoplay"
        loop="loop"
        muted="muted"
      ></video>
      <router-link class="goIndex" to="/index">
        Enter{{ "111" | Test }}--(测试过滤filters)
      </router-link>
      <div class="footer-bottom">
        <div class="copyright">
          全国服务热线<span class="tel">021-61183567</span
          >惠元医院拥有本网站所有内容的最终解释权 ©Copyright 2020 xingfuhuiyuan.
          All rights reserved.
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
            >粤ICP备案17073527号</a
          >
        </div>
        <div class="site">上海市浦东新区秀浦路2500弄4号楼</div>
      </div>
    </div>
    <div>
      测试vuex:
      <input
        type="text"
        style="border: 1px solid #000;width:300px;height:50px;font-size:20px"
        v-model="Vuex111"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  // Prop,
  Watch,
  // Emit,
  // Ref,
  Mixins,
} from "vue-property-decorator";

import headers from "@/components/headers.vue";
// import { mixinHeight } from "@/assets/js/mixins";
import { MyMixin } from "@/assets/js/mixins2";
import { MyMixin3 } from "@/assets/js/mixins3";
// ajax
import { EntryPage } from "@/assets/js/api.js";

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

@Component({
  name: "enter",
  components: {
    headers,
  },
  // mixins: [mixinHeight],
})
// export default class App extends Vue {
export default class App extends Mixins(MyMixin, MyMixin3) {
  // 初始化数据
  // 公共public，私有private与受保护protected的修饰符
  // 一般来说，在TypeScript里，成员都默认为public。
  // 路径
  src = "";
  // 类型
  type = 0;
  test = 1;

  // computed
  get Vuex111() {
    return this.$store.state.Vuex111;
  }
  // 设置值
  set Vuex111(value) {
    console.log(value, "input的value");
    this.$store.commit("updateMessage", value.toUpperCase());
  }

  created() {
    console.log(this, "that");
  }

  mounted() {
    console.log(this.tableHight, "tableHight");

    EntryPage().then((response: any) => {
      console.log(response.data, "EntryPage");
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          this.src = response.data.Data[0].enteranimation;
          if (response.data.Data[0].type == 1) {
            this.type = 1;
          } else if (response.data.Data[0].type == 2) {
            this.type = 2;
          }
        }
      }
    });
  }
  goSearch() {
    this.test++;
  }

  @Watch("test") onTestChanged(newValue: number, oldValue: number) {
    console.log(newValue, "newValue");
    console.log(oldValue, "oldValue");
  }
}
</script>

<style lang="scss" scoped>
.enter {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .bg-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .goIndex {
    font-size: 0.14rem;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    color: #fff;
    line-height: 0.2rem;
    position: absolute;
    z-index: 2;
    right: 0.5rem;
    bottom: 1.5rem;
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0rem 0.5rem 0.55rem 0.5rem;
    .copyright {
      font-size: 0.12rem;
      font-weight: 500;
      text-align: left;
      color: #a3a3a3;
      line-height: 0.24rem;
      .tel {
        color: #b09c6e;
        margin: 0 0.06rem;
        font-weight: bold;
      }
      a {
        color: #a3a3a3;
      }
    }
    .site {
      font-size: 0.12rem;
      font-weight: 500;
      text-align: right;
      color: #a3a3a3;
      line-height: 0.24rem;
    }
  }

  .test {
    width: 100px;
  }
}
</style>
